<template>
  <a-upload
    :multiple='true'
    :file-list='fileList'
    :before-upload='beforeUpload'
    :remove='handleFileRemove'
    :beforeUpload='beforeUpload'
    :customRequest='handleCustomRequest'
    @change='handleChange'
    accept=".docx, .doc, .xlsx, .xls, .pdf, .jpeg, .png"
  >
    <div>
      <a-icon :type="loading ? 'loading' : 'plus'"
              style='width: 40px;height: 40px;border: 1px solid #cdcdcd;display: flex;align-items: center;justify-content: center;cursor:pointer;' />
    </div>
  </a-upload>
</template>

<script>
import { uploadAction, getAction } from '@/api/manage'

export default {
  name: 'ZUpload',
  data() {
    return {
      loading: false,
      saveFiles: '/sys/common/sjUpload',
      getFiles: '/sjzyzhgl/sjFileInfo/commonFileInfo',
      removeFilse: '/sjzyzhgl/sjFileInfo/removeAffix',
      fileList: [
        // {
        //   uid: '-1',
        //   name: 'xxx.png',
        //   status: 'done',
        //   url: 'http://www.baidu.com/xxx.png',
        // },
      ]
    }
  },
  props: {
    fileid: '',
    isShow: false,
    saveFileList: {
      type: [String, Array],
      default: []
    }
  },
  watch: {
    fileid: {
      handler: function(val) {
        console.log('flie', val)
        this.fileList = []
        this.getFile()
      },
      immediate: true
    }
  },

  methods: {
    beforeUpload() {
      return true
    },
    async handleCustomRequest(file, fileList) {
      const ret = await this.saveSingleFile('', file)
      return ret
    },

    saveSingleFile(path, file) {
      return new Promise((re, je) => {
        let formData = new FormData()
        formData.append('files', file.file)
        formData.append('biz', path)
        formData.append('id', this.fileid || '')
        uploadAction(this.saveFiles, formData).then((res) => {
          if (res.success) {
            this.$emit('uploadFile', res.result)
            const { affixList } = res.result
            if (Array.isArray(affixList) && affixList.length === 1) {
              const respData = affixList[0]
              const saveFile = {
                uid: file.file.uid,
                name: file.file.name
              }
              saveFile.id = respData.id
              saveFile.url = respData.url
              saveFile.status = 'done'
              this.fileList.push(saveFile)
              this.updateSaveFileList()
            }
            file.onSuccess(res.result, file)
            re(true)
          } else {
            this.$emit('uploadFile')
            je(false)
          }
        })
      })

    },
    handleChange(info) {
      // let fileList = [...info.fileList]
      // let fileIds = fileList.reduce((acc,cur) => {
      //   acc.push
      // },[])
    },
    handleFileRemove(file) {
      console.log(file)
      if (file.status) {
        getAction(this.removeFilse, { id: file.id }).then((res) => {
          if (res.success) {
            this.fileList = this.fileList.filter(item => item.id !== file.id)
            this.updateSaveFileList()
            this.$message.success(res.message)
            return true
          } else {
            this.$message.error(res.message)
            return false
          }
        })
      } else {
        return true
      }

    },
    getFile() {
      getAction(this.getFiles, { id: this.fileid }).then((res) => {
        if (res.success && res.result) {
          this.fileList = res.result.affixList.map((item, index) => {
            return {
              name: item.fileName,
              uid: item.id,
              status: 'done',
              url: `${window._CONFIG['domianURL']}/sys/common/static/${item.url}`

            }
          })
        } else {
          console.log(res)
        }
      })
    },
    updateSaveFileList() {
      const fileIDS = this.fileList.reduce((acc, cur) => {
        acc.push(cur.id)
        return acc
      }, [])
      this.$emit('update:saveFileList', fileIDS)
    }
  }
}
</script>

<style lang='less' scoped>
/deep/ .ant-upload {
  position: absolute;
}

/deep/ .ant-upload-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-top: 50px;

  .ant-upload-list-item {
    height: 25px;
    line-height: 25px;
    margin-top: 0;
  }

  .ant-upload-list-item-info {
    padding: 0 25px 0 5px;
  }

  .ant-upload-list-item-card-actions {
    right: 0;
  }
}
</style>